<template>
  <div class="tag">
    <a-tag :color="time.style" v-for="(time, index) in tagrouters" :key="index">
      <span @click="onClickTag(index)"> {{ time.name }}</span>
      <span class="close" @click="onClickClose(index)">
        <CloseOutlined />
      </span>
    </a-tag>
    <a-tag color="#108ee9" class="footer">
      <span @click="onClickCloseAll">关闭其他</span>
    </a-tag>
  </div>
</template>

<script lang='ts'>
import { reactive, Ref, ref, SetupContext, toRefs } from "vue";
import { CloseOutlined } from "@/components/AntDesign/icons/icons";
import $router from "@/router";
import { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
export default {
  name: "TagMenu",
  components: { CloseOutlined },
  emits: ["onRouterKey"],
  setup(props: any, context: SetupContext) {
    const data: {
      tagrouters: {
        path: string;
        name: string;
        title: string;
        style?: string;
      }[];
    } = reactive({
      tagrouters: [],
    });

    /* 初始化tag标签 */
    if ($router.currentRoute.value.matched[1]) {
      data.tagrouters.push({
        path: $router.currentRoute.value.matched[1].path,
        name: $router.currentRoute.value.matched[1].meta.name,
        title: $router.currentRoute.value.matched[1].meta.title,
        style: "#108ee9",
      });
    }

    /* 监听路由变化 */
    const key: Ref<number> = ref(0);
    $router.beforeEach(
      (
        to: RouteLocationNormalized,
        from: RouteLocationNormalized,
        next: NavigationGuardNext
      ) => {
        if (to.matched[1] && from.matched[1]) {
          context.emit("onRouterKey", {
            path: to.matched[1].path,
            title: to.matched[1].meta.title,
          });

          data.tagrouters.forEach((item, index) => {
            if (item.name == from.matched[1].meta.name) {
              item.style = "";
            }

            if (item.name == to.matched[1].meta.name) {
              item.style = "#108ee9";
              key.value = index;
            }
          });
          /* 判断该数组中是否存在该值 */
          const result: boolean = data.tagrouters.some(
            (element: {
              path: string;
              name: string;
              title: string;
              style?: string;
            }): boolean => {
              if (element.name == to.matched[1].meta.name) {
                return true;
              }
              return false;
            }
          );
          if (!result) {
            data.tagrouters.push({
              path: to.matched[1].path,
              name: to.matched[1].meta.name,
              title: to.matched[1].meta.title,
              style: "#108ee9",
            });
            key.value = data.tagrouters.length - 1;
          }
        }
        next();
      }
    );

    /* tag标签点击事件 */
    function onClickTag(index: number): void {
      key.value = index;
      $router.push({ path: data.tagrouters[index].path });
    }

    /* 关闭tag标签 */
    function onClickClose(index: number): void {
      if (data.tagrouters[index].style != "#108ee9") {
        data.tagrouters.splice(index, 1);
      }
    }

    function onClickCloseAll() {
      // console.log(data.tagrouters[key.value]);
      data.tagrouters = [data.tagrouters[key.value]];
    }

    return {
      ...toRefs(data),
      onClickTag,
      onClickClose,
      onClickCloseAll,
    };
  },
};
</script>
<style lang="less" scoped>
.tag {
  overflow: hidden;
  box-shadow: 0 5px 10px #ddd;
  height: 30px;
  background: #fff;
  margin: 0 0 10px 0;
  padding: 2px 5px;
  .close {
    float: right;
  }
}
.footer {
  float: right;
}
</style>